import { Footer } from '@/components';
import { register } from '@/services/ant-design-pro/api';
import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginForm, ProForm,
  ProFormText,
} from '@ant-design/pro-components';
import { Helmet, history} from '@umijs/max';
import {Alert, message, Tabs} from 'antd';
import { createStyles } from 'antd-style';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';
import {Link} from "@@/exports";



const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => {
  return (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );
};
const Register: React.FC = () => {
  const [userLoginState] = useState<API.RegisterResult>({});
  const { styles } = useStyles();
  const handleSubmit = async (values: API.RegisterParams) => {
    // 校验
    const {  password,checkPassword } = values;
    if(password !== checkPassword){
      message.error("两次输入密码不一致");
      return
    }
    try {
      // 注册
      const msg = await register({
        ...values,
      });
      if (!msg.data) {
        message.error(msg.message);
        return;
      }
      else{
        console.log(msg.data.userId);
        message.success("注册成功")
        // 跳转页面
        history.push("/user/login");
      }
      // 如果失败去设置用户错误信息
      throw new Error(msg.message)
    } catch (error) {
      const defaultLoginFailureMessage = '注册失败，请重试！';
      console.log(error);
      message.error(defaultLoginFailureMessage);
    }
  };
  const { status} = userLoginState;
  return (
    <div className={styles.container}>
      <Helmet>
        <title>
          {'注册'}- {Settings.title}
        </title>
      </Helmet>
      <div
        style={{
          flex: '1',
          padding: '32px 0',
        }}
      >
        <LoginForm
          submitter={{
            searchConfig: {
              submitText: "注册"
            }
          }}
          contentStyle={{
            minWidth: 500,
            maxWidth: 500,
          }}
          logo={<img alt="logo" src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/src_img/logo2.png"/>}
          title="My PetStore"
          subTitle={'My PetStore 是全世界最具影响力的网上宠物商店'}
          onFinish={async (values) => {
            await handleSubmit(values as API.RegisterParams);
          }}
        >
          <Tabs centered>
            <Tabs.TabPane tab={'用户注册'}/>
          </Tabs>

          {status === 0 && (
            <LoginMessage content={'错误的用户名和密码'}/>
          )}

          <ProFormText
            name="username"
            label="用户名"
            fieldProps={{
              size: 'large',
              prefix: <UserOutlined/>,
            }}
            rules={[
              {
                required: true,
                message: '用户名是必填项！',
              },
            ]}
          />
          <ProFormText.Password
            label="密码"
            name="password"
            initialValue={"123"}
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined/>,
            }}
            rules={[
              {
                required: true,
                message: '密码是必填项！',
              },
            ]}
          />
          <ProFormText.Password
            name="checkPassword"
            label="确认密码"
            initialValue={"123"}
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined/>,
            }}
            placeholder={'请确认密码'}
            rules={[
              {
                required: true,
                message: '重写密码是必填项！',
              },
            ]}
          />
          <ProForm.Group>
            <ProFormText
              width={234}
              initialValue={"ABC"}
              name="firstname"
              label="firstname"
              tooltip="最长为 24 位"
              placeholder="请输入名称"
              rules={[
                {
                  required: true,
                  message: 'firstname是必填项！',
                },
              ]}
            />
            <ProFormText
              width={234}
              initialValue={"XYZ"}
              name="lastname"
              label="lastname"
              tooltip="最长为 24 位"
              placeholder="请输入名称"
              rules={[
                {
                  required: true,
                  message: 'lastname是必填项！',
                },
              ]}
            />
          </ProForm.Group>
          <ProFormText
            width={500}
            name="email"
            initialValue={"123acid@yourdomain.com"}
            label="邮箱"
            tooltip="最长为 24 位"
            placeholder="请输入邮箱"
            rules={[
              {
                required: true,
                message: '邮箱是必填项！',
              },
            ]}
          />
          <ProFormText
            width={500}
            name="phone"
            initialValue={"555-555-5555"}
            label="手机号"
            tooltip="最长为 24 位"
            placeholder="请输入手机号"
            rules={[
              {
                required: true,
                message: '手机号是必填项！',
              },
            ]}
          />
          <ProForm.Group>
            <ProFormText
              width={234}
              name="addr1"
              initialValue={"901 San Antonio Road"}
              label="地址1"
              tooltip="最长为 24 位"
              placeholder="请输入地址1"
              rules={[
                {
                  required: true,
                  message: '地址1是必填项！',
                },
              ]}
            />
            <ProFormText
              width={234}
              name="addr2"
              label="地址2"
              tooltip="最长为 24 位"
              placeholder="请输入地址2"
            />
          </ProForm.Group>

          <ProForm.Group>
            <ProFormText
              width={234}
              name="city"
              initialValue={"Palo Alto"}
              label="城市"
              tooltip="最长为 24 位"
              placeholder="请输入居住城市"
              rules={[
                {
                  required: true,
                  message: '城市是必填项！',
                },
              ]}
            />
            <ProFormText
              width={234}
              name="state"
              initialValue={"CA"}
              label="省份"
              tooltip="最长为 24 位"
              placeholder="请输入地省份"
              rules={[
                {
                  required: true,
                  message: '省份是必填项！',
                },
              ]}
            />
          </ProForm.Group>

          <ProForm.Group>
            <ProFormText
              width={234}
              name="country"
              initialValue={"USA"}
              label="国家"
              tooltip="最长为 24 位"
              placeholder="请输入居住国家"
              rules={[
                {
                  required: true,
                  message: '国家是必填项！',
                },
              ]}
            />
            <ProFormText
              width={234}
              name="zip"
              initialValue={"94303"}
              label="zip"
              tooltip="最长为 24 位"
              placeholder="请输入zip"
              rules={[
                {
                  required: true,
                  message: 'zip是必填项！',
                },
              ]}
            />
          </ProForm.Group>

          <div
            style={{
              marginBottom: 40,
            }}
          >
            <Link
              style={{
                float:'right'
              }}
              to={"/user/login"}
            >
              取消注册
            </Link>
          </div>

        </LoginForm>

      </div>

      <Footer/>

    </div>
  );
};

export default Register;
